<!--markdown预览-->
<template>
    <div style="padding: 10px;">
        <el-dropdown style="padding: 0 32px 0 32px;"  @command="handleCommand">
            <el-button type="primary">
                面试合集类型<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item divided command="js">js面试合集</el-dropdown-item>
                    <el-dropdown-item divided command="java">java面试合集</el-dropdown-item>
                    <el-dropdown-item divided command="front-end">前端面试合集</el-dropdown-item>
<!--                    <el-dropdown-item divided>双皮奶</el-dropdown-item>-->
<!--                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
                </el-dropdown-menu>
            </template>
        </el-dropdown>


        <v-md-preview :text="markdown"></v-md-preview>

    <div style="margin: 10px 0;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    </div>
</template>

<script>
    import request from "../utils/request";

    export default {
        name: "PreviewMarkdown",
        data() {
            return {
                type: 'java',
                currentPage: 1,
                pageSize: 5,
                total: 0,
                tableData: [],
                markdown: '##### 1、请你谈谈Cookie的弊端\n',
            };
        },
        created() {
            this.load();
        },
        methods: {
            load() {
                request.get("/interviewCollection",{
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        type: this.type
                    }
                }).then(res=>{
                    // console.log(res)
                    this.tableData=res.data.records
                    this.total=res.data.total
                    this.markdown=''
                    for (var i=0;i<res.data.records.length;i++)
                    {
                        this.markdown=this.markdown+res.data.records[i]['interview'];
                    }
                    // console.log(this.markdown);
                })
            },
            handleSizeChange(pageSize) { // 改变当前每页的个数触发
                this.pageSize=pageSize
                this.load()
            },

            handleCurrentChange(pageNum) { // 改变当前页码触发
                this.currentPage=pageNum
                this.load()
            },

            handleCommand(command) {
                this.type = command;
                this.load()
                console.log(this.type)
            }
        },
    }
</script>

<style scoped>
    .el-dropdown {
        vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>